<template>
	<s-layout title="地址薄" class="book-wrap">
		<view class="tabs">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#0396ff" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-for="item in list" :key="item.id" class="card p-4 mb-3">
				<view class="info" @tap="onSelect(item)">
					<view class="basic">
						<text class="mr-2">{{ item.consignee }}</text>
						<text>{{ item.mobile }}</text>
					</view>
					<view class="address">
						<text class="mr-2">{{ item.area }}</text>
						<text>{{ item.address }}</text>
					</view>
				</view>
				<view class="ss-flex ss-row-between operate">
					<view class="left">
						<!-- <text class="_icon-check" :class="{ active: item.is_default }"></text>
						默认寄件地址 -->
					</view>
					<view class="ss-flex right">
						<text @tap="onCopy(item)"><text class="_icon-copy-o"></text>复制</text>
						<text @tap="toAddPage(item.id)"><text class="_icon-edit"></text>编辑</text>
						<text @tap="onDelete(item.id)"><text class="_icon-delete-o"></text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed">
			<button class="button" @tap="toAddPage(false)">
				新增{{ current ? '收件' : '寄件' }}地址
			</button>
		</view>
	</s-layout>
</template>

<script setup>
	import { ref, computed, reactive } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	const current = ref(0)
	const items = ['寄件地址', '收件地址']
	let batch = false
	const state = reactive({
		loading: true,
		sendingList: [],
		receivingList: []
	})
	
	const list = computed(() => {
		return current.value ? state.receivingList : state.sendingList
	})
	
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
			if(list.value.length) return
			getAddressList(e.currentIndex)
		}
	}
	
	const onDelete = (id) => {
	  uni.showModal({
	    title: '提示',
	    content: '确认删除此地址吗？',
	    success: async function (res) {
	      if (res.confirm) {
	        const { code } = await sheep.$api.user.address.delete(id);
	        code === 1 && getAddressList(current.value)
	      }
	    },
	  });
	};
	
	const toAddPage = (id) => {
		let params = {
			type: current.value + 1
		}
		if (id) params.id = id
		sheep.$router.go('/pages/mail/add-address', params)
	}
	
	const getAddressList = async (type) => {
		const { list } = sheep.$api.user.address
		const { data } = await list(type + 1)
		const name = type ? 'receivingList' : 'sendingList'
	  state[name] = data.map(item => {
			item.area = [
				item.province_name,
				item.city_name,
				item.district_name
			].join('-')
			return item
		});
	  state.loading = false;
	}
	
	const onSelect = async (item) => {
		const store = sheep.$store('mail')
		if (current.value) {
			if (batch) {
				store.setReceivingInfoList(item)
			} else {
				store.setReceivingInfo(item)
			}
		} else {
			store.setShippingInfo(item)
		}
		sheep.$router.back()
	}
	
	// 复制
	const onCopy = (item) => {
		let text = `${item.consignee} ${item.mobile} ${item.area} ${item.address}`
	  sheep.$helper.copyText(text);
	};
	
	onLoad((option) => {
		current.value = option.type - 0
		if (option.batch) {
			batch = true
		}
	})
	
	onShow(() => {
		getAddressList(current.value)
	});
</script>

<style lang="scss" scoped>
	.tabs {
		background-color: #fff;
		:deep(.segmented-control) {
			height: 100rpx;
			.segmented-control__text {
				font-size: 32rpx;
				padding: 24rpx 0;
				border-bottom-width: 2rpx;
			}
		}
	}
	.content {
		position: relative;
		padding: 20rpx;
		padding-bottom: 168rpx;
		.card {
			font-size: 30rpx;
			color: #9b9b9b;
		}
		.info {
			border-bottom: 2rpx solid #eeeeee;
			.basic {
				color: #000000;
				margin-bottom: 12rpx;
			}
			.address {
				margin-bottom: 20rpx;
				line-height: 1.2;
			}
		}
		.operate {
			margin-top: 20rpx;
			.left {
				._icon-check {
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					line-height: 24rpx;
					text-align: center;
					border-radius: 50%;
					font-size: 24rpx;
					border: 2rpx solid #9b9b9b;
					&.active {
						background-color: #1ba9ba;
						color: #fff;
						border-color: #1ba9ba;
					}
				}
			}
			.right {
				padding-right: 20rpx;
				column-gap: 34rpx;
			}
		}
	}
	.fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 40rpx 36rpx;
		background-color: #fff;
		box-sizing: border-box;
		.button {
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #fff;
			border-radius: 88rpx;
			background-color: #0396ff;
			outline: none;
			border: none;
		}
	}
</style>